<template>

    <view class="orderPage allPage">
        <view class="headNav">

            <view class="fixed">

                <view class="types">

                    <scroll-view class="myScroll" scroll-x="true" scroll-y="false">
                        <view v-for="item,idx in typesArr" :key="idx" class="item" :class="{'active':typeIdx == idx}" @click.stop="swicthTypes(idx)">
                            {{ item }}
                        </view>
                    </scroll-view>

                </view>

                <view class="ul">
                    <view v-for="item,idx in titleNav" :key="idx" class="li" :class="{'active': idx == navIdx }" @click='switchTit(idx)'>{{item.name}}</view>
                </view>
            </view>

        </view>
        <!-- //列表 -->
        <view class="list-box">

            <view v-if="typeIdx == 0">

                <view v-for="itemMo,idx in listData" :key="idx">

                    <view class="selectList show" v-for="item,idx in  itemMo " :key="item.id">
                        <view class="head">
                            <view class="head-l">
                                <text class="s-name">{{item.supermarketName }}</text>
                            </view>
                            <view class="head-r">
                                <text class="min ml5 col-warn">{{item.orderStatusStr  }}</text>
                                <!-- <text class="">{{item.orderNumber  }}</text> -->
                            </view>
                        </view>
                        <view class="sec_item ul" @click="()=>goDetail( item )">
                            <view class="li" v-for=" goodsItem,idx in item.orderGoodsModelList" :key='goodsItem.id'>
                                <view class="p productBox">
                                    <view class="imgs">
                                        <image :src="goodsItem.listPictureSrc" mode="aspectFit" :lazy-load="true"></image>
                                    </view>
                                    <view class="info">
                                        <view class="info-l">
                                            <view class="name text-delic2">
                                                <text class="">
                                                    {{ goodsItem.goodsName }}
                                                </text>
                                            </view>
                                            <view class="bottom">

                                                <view class="nums">
                                                    <text>
                                                        x {{goodsItem.goodsNum  }}
                                                    </text>
                                                </view>

                                            </view>
                                        </view>
                                        <view class="info-r">
                                            <view class="price">
                                                <text class="min">￥</text> {{ goodsItem.payMoney }}
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="priceBox text-right">
                            <text class="min">合计实付:￥</text><text class="b">{{item.orderMoney }}</text>
                        </view>

                        <view class="btns-box">
                            <!-- v-if=" item.orderStatus == 15 " -->
                            <text class="btn update" @click='()=>startOrder(item)' v-if=" item.orderStatus == 15 ">开始配送</text>
                            <!-- v-if=" item.orderStatus == 20 " -->
                            <!-- <text class="btn pay" @click='gopay(item)' v-if=" item.orderStatus == 20 " >配送完成</text> -->
                            <!-- <text  class="btn report" bindtap='handleSureReport' data-item='{{item}}'>确认报件</text> -->
                        </view>
                    </view>
                </view>
            </view>

            <view v-else>
                <view v-for="item,idx in listData" :key="idx">
                    <ExpressTemplate :listData="item" handle @handleClick="handleClick" />
                </view>
            </view>
            <view class="nolist" v-if="showNodata && total == 0">
                暂未查询到相关订单
            </view>
        </view>
    </view>

</template>
<script>

import { statusList, DealOrderInfo } from '../../utils/configDIct.js'

import Process from '../../utils/process'
import ExpressTemplate from '../../components/ExpressTemplate'
const app = getApp();
export default {
    components: { ExpressTemplate },
    data () {
        return {
            typesArr: ['超市订单', '快递订单'],
            typeIdx: 0,
            titleNav: [
                { name: "全部", code: [] },
                { name: "待配送", code: [15] },
                { name: "配送中", code: [20] },
                { name: "已完成", code: [25] },

            ],
            navIdx: 0,
            searchArr: ['商标名称', '申请人', '申请号'],
            searchIdx: 0,
            searchkey: "",
            headHeight: 0,
            params: {},
            listData: [],
            orderStatus: '', //状态

            totalPage: 0,  //总页数
            showNodata: false,
            queryForm: {
                pageNum: 1, //第几页
                pageSize: 5,
                orderStatusList: []
            },
            total: 0,
            statusList: statusList
        }
    },
    onShow () {

        if (this.showNodata) {
            this.initPage()
        }

    },
    onLoad (option) {

        let index = 0

        if (option.status) {

            this.titleNav.map((item, idx) => {

                if (item.code[0] == option.status) {
                    index = idx
                }

            })
        }

        this.navIdx = index

        this.queryForm.orderStatusList = this.titleNav[index].code

        app.laterToken(() => {

            this.initPage()
        })

    },
    methods: {
        initPage (cb) {

            let requireUrl = this.typeIdx == 0 ? 'flash/supermarket/order/psry/page/list?loading' : 'flash/supermarket/order/express/psry/page/list?loading'

            this.$axios({ url: requireUrl, data: this.queryForm })
                .then(res => {

                    this.$set(this.listData, this.queryForm.pageNum - 1, DealOrderInfo(res.data, this.statusList))

                    this.total = res.total

                    this.showNodata = true

                    cb && cb()
                })
        },
        //超市订单
        initShopOrder () {

        },
        //切换订单种类
        swicthTypes (idx) {

            if (this.typeIdx != idx) {
                this.typeIdx = idx
                this.queryForm.pageNum = 1

                this.initPage()
            }

        },
        //切换订单状态
        switchTit (i) {

            if (i != this.navIdx) {

                this.navIdx = i

                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 10
                });

                this.queryForm.pageNum = 1
                this.queryForm.orderStatusList = this.titleNav[i].code


                this.initPage()
            }
        },
        //下拉刷新
        onPullDownRefresh () {

            this.queryForm.pageNum = 1


            this.initPage(() => {
                uni.stopPullDownRefresh();//停止刷新
            })

        },
        onReachBottom () {
            console.log('触底了')

            if (this.queryForm.pageNum * this.queryForm.pageSize < this.total) {

                this.queryForm.pageNum += 1

                this.initPage()
            }

        },
        goDetail (row) {
            console.log('触底了', row)

            this.$goNext('./shop-order-detail?id=' + row.id)
        },
        //开始配送
        startOrder (row) {

            let that = this

            uni.showModal({
                title: '温馨提示',
                content: '确定是否开始配送？',
                confirmText: "开始配送",
                cancelText: "取消",
                success: function (res) {
                    if (res.confirm) {

                        // console.log('配送开始了。。。。。。。。。。。。。。。。。。。。。。。。。。。')

                        Process.deliveryReceiving(row.id)
                            .then(res => {

                                console.log('开始配货了', res)

                                uni.showToast({ title: '开始配送' })

                                that.initPage()

                            })


                    }
                }
            })

            // Process.deliveryReceiving(row.id)
            //     .then(res => {

            //         console.log('开始配货了', res)

            //         this.initPage()

            //     })
        },
        handleClick (type, row) {
            console.log('点击类型', type)

            if (type == 'detail') {
                this.$goNext('./express-order-detail?id=' + row.id)
            }
            else if (type == 'start') {

                this.$goNext('./express-order-detail?id=' + row.id)

                // Process.deliveryExpressReceiving( row.id  )
                //     .then( res =>{

                //         console.log('开始配货了', res )

                //         this.initPage()

                //     })
            }
        }

    }
}
</script>
<style lang="scss" scoped>
.headNav {
    height: 160rpx;
    width: 100%;
    .fixed {
        box-sizing: border-box;
        position: fixed;
        height: 160rpx;
        background: #fff;
        border-bottom: 2rpx solid #eaeaea;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 10;
    }
    .types {
        height: 80rpx;
        box-sizing: border-box;
    }
    .myScroll {
        height: 100%;
        padding: 10rpx 0;
        box-sizing: border-box;
        .item {
            display: inline-block;
            text-align: center;
            border-radius: 3px;
            margin: 0rpx 10rpx;
            padding: 0 20rpx;
            height: 60rpx;
            line-height: 60rpx;
            background: #f7f7f7;
            color: #565656;
            &.active {
                background: #fee6b6;
                color: #703508;
                .name {
                    color: #713100;
                }
            }
        }
    }
}
.headNav .ul {
    height: 80rpx;
    line-height: 80rpx;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    padding: 0 24rpx;
}
.headNav .li {
    display: inline-block;
    width: 90rpx;
    margin: 0 20rpx;
    height: 100%;
    border-bottom: 4rpx solid #fff;
    text-align: center;
    box-sizing: border-box;
    font-size: 28rpx;
    transition: all 0.3s;
}

.headNav .li.active {
    color: #1989fa;
    border-bottom: 4rpx solid #1989fa;
}

.list-box {
    padding: 20rpx 32rpx 60rpx;
}

.nolist {
    margin-top: 100rpx;
    text-align: center;
    font-size: 28rpx;
    color: #565656;
}

/* //新增搜索框 */
.brandName {
    background-color: #ffffff;
    padding: 20rpx 0;
}
.brandKeyWord,
.brandKeyWord .p,
.brandName .brandHead {
    height: 64rpx;
    line-height: 64rpx;
}
.brandName image {
    margin-top: 15rpx;
}
/* //公共部分 */
.common-box {
    overflow: hidden;
}
.common-box image {
    float: left;
    width: 160rpx;
    height: 140rpx;
    text-align: center;
    line-height: 60px;
    border: 1px solid #eee;
    overflow: hidden;
    margin-right: 30rpx;
}
// **************************************************************************************************.active
/* //弹出选中明细 */
.selectList {
    box-sizing: border-box;
    width: 100%;
    z-index: 12;
    padding: 10px 0px 14px;
    background: #fff;
    font-size: 12px;
    transition: all 0.4s;
    margin-bottom: 32rpx;
    border-radius: 6px;
    box-shadow: 0 0 4px #eaeaea;
    .head {
        display: flex;
        width: 100%;
        // margin-bottom: 20rpx;
        padding: 0 32rpx 20rpx;
        border-bottom: 1rpx solid #eaeaea;
        .head-l {
            color: #888;
            font-size: 34rpx;
            width: 100%;
            flex: 1;
            .s-name {
                flex: 1;
                color: #000;
                width: 100%;
            }
            // .s-r {
            //     .min {
            //         font-size: 24rpx;
            //         color: #888;
            //     }
            // }
        }
        .head-r {
            margin-left: 10px;
        }
    }
    .priceBox {
        padding: 0 32rpx 10rpx;
        font-size: 34rpx;
        .min {
            font-size: 24rpx;
        }
    }
    .btns-box {
        text-align: right;
        padding: 20rpx 32rpx 0rpx;
        .btn {
            display: inline-block;
            text-align: right;
            padding: 10rpx 28rpx;
            border-radius: 50px;
            margin-left: 30rpx;
            font-size: 28rpx;
            background-color: #ffffff;
            color: #31aaf5;
            border: 1px solid #31aaf5;
        }
        .btn.update {
            color: #f0833b;
            border: 1px solid #f0833b;
        }
        .btn.report {
            color: #ff0000;
            border: 1px solid #ff0000;
        }
        .btn.cancel {
            color: #b9b9b9;
            border: 1px solid #b9b9b9;
        }
    }
}

// 商品
.sec_item {
    padding-top: 28rpx;
    .li {
        padding: 10rpx 32rpx;
    }
    // border-bottom: 1px solid #f1f1f1;

    .productBox {
        display: flex;
        .imgs {
            margin-right: 20rpx;
            image {
                width: 100rpx;
                height: 100rpx;
                background: #f1f1fe;
            }
        }
        .info {
            display: flex;
            width: 100%;
            .info-l {
                flex: 1;
            }
            .info-r {
                text-align: right;
                min-width: 150rpx;
                margin-left: 10rx;
                font-size: 30rpx;
                .min {
                    font-size: 22rpx;
                }
            }
            .name {
                font-size: 26rpx;
                color: #000;
                font-weight: bold;
            }
            .bottom {
                // padding-top: 10rpx;
                overflow: hidden;
                .nums {
                    float: left;
                    color: #888;
                    font-size: 26rpx;
                    margin: 6rpx 0;
                    // .old-price {
                    //     margin-left: 10rpx;
                    //     text-decoration: line-through;
                    // }
                    // .col-red {
                    //     font-size: 30rpx;
                    // }
                    // .mini {
                    //     font-size: 26rpx;
                    // }
                }
                .buy-btn {
                    margin: 6rpx 0;
                    float: right;
                    min-width: 140rpx;
                    text-align: right;
                }
            }
        }
    }
}
</style>